<template>
  <div class="app-container">
    <div class="my-define-dialog-title">
      {{title}}
      <div class="my-define-dialog-title-btn">
        <i @click="cancel(false)" class="saas-iconfont saas-icon-caozuo-quanping-shousuo"></i>
      </div>
    </div>
    <el-form size="mini" label-width="80px" ref="myForm" :model="form" label-position="top">
      <el-row>
        <el-col :span="24" :prop="'label'" :rules="{
                  required: true, message: '请输入分组名称', trigger: 'change'}">
          <el-form-item label="">
            <el-input style="width: 100%; height: 32px; line-height: 32px;" placeholder="请输入分组名称"
              v-model="form.label"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" style="margin-bottom: 40px;">
          <el-form-item label="请选择移入分组的数据">
            <!-- default-expand-all -->
            <el-tree :data="sceneList" node-key="id" :expand-on-click-node="false" highlight-current
              style=" max-height: 400px; overflow-y: auto;">
              <div style="" class="custom-tree-node" slot-scope="{ node, data }">
                <div @click="doCheckGroup(data)">
                  <svg-icon v-if="!data.isGroup" icon-class="icon-table" />
                  {{ data.label }}
                </div>
                <div v-if="!data.isGroup" style="position: absolute;top: 0;right: 10px;">
                  <el-checkbox v-model="data.isChecked"></el-checkbox>
                </div>
              </div>
            </el-tree>
          </el-form-item>
        </el-col>
        <el-col :span="24"
          style="text-align: right; position: fixed;bottom: 0rem; right: 0px; padding-right: 20px; z-index: 999;">
          <el-form-item>
            <el-button type="primary" @click="handleGroupSave">确认</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  import {
    saveMenu
  } from '@/api/system/menu'
  import {
    getScenes,
    saveScene
  } from '@/api/system/scene'
  import defaultSettings from '@/settings'
  export default {
    name: 'menu-edit-group',
    props: {
      Id: {
        type: Number,
        default: 0
      },
      title: {
        type: String,
        default: ''
      },
      sceneType: {
        type: Number,
        default: 0
      },
      data: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        labelForm: defaultSettings.labelForm,
        dialogShow: false,
        dialogTitle: '',
        form: {
          id: 0,
          label: ''
        },
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        sceneList: []
      }
    },
    created() {
      this.form = this.data
      this.getData()
    },
    methods: {
      getData() {
        getScenes({
          sceneType: this.sceneType
        }).then(res => {
          if (res.status) {
            this.sceneList = res.outputData.sceneList.filter((item) => {
              return item.visibility
            })
            this.sceneList.forEach((item) => {
              item.isChecked = false
              if (item.id == this.form.id) {
                if (item.children) {
                  item.children.forEach((item2) => {
                    item2.isChecked = true
                  })
                }
              } else {
                if (item.children) {
                  item.children.forEach((item2) => {
                    item2.isChecked = false
                  })
                }
              }
            })
          }
        })
      },
      handleGroupSave() {
        var childIdList = []
        this.sceneList.forEach((item) => {
          if (item.isChecked && !item.isGroup) {
            childIdList.push(item.id)
          }
          if (item.children) {
            item.children.forEach((item2) => {
              if (item2.isChecked && !item2.isGroup) {
                childIdList.push(item2.id)
              }
            })
          }
        })
        saveScene({
          isGroup: 1,
          defineSceneId: this.form.defineSceneId,
          parentId: 0,
          sceneType: this.sceneType,
          sceneTitle: this.form.label,
          childIds: JSON.stringify(childIdList)
        }).then(res => {
          if (res.status) {
            this.$message({
              message: this.form.defineSceneId > 0 ? '修改成功' : '新增成功',
              type: 'success'
            })
            this.cancel(true)
          }
        })
      },
      submitForm() {
        var that = this;
        this.$refs['myForm'].validate(valid => {
          if (valid) {
            this.handleGroupSave()
          }
        })
      },
      cancel(reload) {
        this.$$parent(this, "doCloseMenu", reload)
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
